<template>
  <main id="LogChart" v-loading="chartLoading" class="LogChart flex_column flex_sb" :style="`padding-top: ${switchState?230:10}px;height: ${switchState?55:82}vh;`">
    <section class="selectPoint">
      <div v-show="switchState" style="padding:0 20px">
        <div>
          <el-divider content-position="left">选择点</el-divider>
          <div class="">
            <div class="titleBtn flex_start">
              <div style="margin-right:15px">
                <el-button type="primary" :disabled="data.type!=3" @click="checkoutPoint = []" size="small">全不选</el-button>
              </div>
              <el-checkbox :disabled="data.type!=3" v-model="checkoutPoint" v-for="item in pointList" @change="pointCheckoutChange" :key="item.id" :label="item.id" border>{{item.name}}</el-checkbox>
            </div>
          </div>
        </div>
        <section>
          <div class="titleBtn">
            <el-divider content-position="left">选择测线</el-divider>
            <div class=" flex_start">
              <div>
                <el-checkbox v-model="checkoutChartType" v-for="(item,index) in chartTypeList" @change="charTypeCheckoutChange(item.type)" :key="index" :label="item.type" border>{{item.label}}</el-checkbox>
              </div>
              <div>
                <el-divider direction="vertical"></el-divider>
              </div>
              <div>
                <el-alert title="注意：如果回归曲线的相关系数低于 0.92 ,不显示相关图形" type="warning" :closable="false">
                </el-alert>
              </div>
              <div>
                <el-divider direction="vertical"></el-divider>
              </div>
              <div>
                <el-checkbox :disabled="checkoutPoint.length>1" v-model="checkoutThreshold" @change="thresholdCheckoutChange" label="bxl" border>变形量阈值</el-checkbox>
                <!-- <el-checkbox :disabled="checkoutPoint.length>1" v-model="checkoutThreshold" @change="thresholdCheckoutChange" label="bxsl" border>变形速率</el-checkbox> -->
              </div>
            </div>
          </div>
        </section>
      </div>

      <div class="headerBox flex_sb">
        <div>
          <h3>{{data.name}}</h3>
        </div>
        <div>
          <el-button type="danger" @click="addReportClick">新建警示</el-button>
        </div>
      </div>
      <div @click="()=>{switchState = !switchState}" class="switch flex_center w100">
        <span class="switch_btn">
          <i :class="switchState?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
        </span>
      </div>
    </section>
    <section class="bodyBox">
      <section>
        <div ref="chartTarget" class="echartBox">
          显示图例
        </div>
      </section>
      <section class="dataTableBox">
        <el-divider content-position="left">数据</el-divider>
        <!-- 单点数据 -->
        <el-table v-if="data.type==2||checkoutPoint.length==1" stripe border :data="selectPointTableDatas" style="width: 100%" class="h100">
          <el-table-column prop="detectionTime" label="检测时间" width="180"></el-table-column>
          <el-table-column prop="managerialClass" label="管理等级" width="180"></el-table-column>
          <el-table-column prop="constructionStatus" label="施工状态" width="180"></el-table-column>
          <el-table-column prop="resultValue" label="测量值(m)" width="180"></el-table-column>
          <el-table-column prop="variation" label="相对上次沉降值(mm)" width="180"></el-table-column>
          <el-table-column prop="settlingVelocity" label="沉降速率(mm/天)" width="180"></el-table-column>
          <el-table-column prop="cumulativeSubsidence" label="累计沉降(mm)" width="180"></el-table-column>
          <!-- <el-table-column prop="temperature" label="温度" width="180"></el-table-column> -->
          <el-table-column prop="remark" label="备注" width="180"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="addDataReportClick(scope.row)" type="text" size="small">新建警告</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 多点数据 -->
        <el-table v-if="checkoutPoint.length>1" stripe border :data="checkoutPointTableDatas.datas" style="width: 100%" class="h100">
          <el-table-column v-for="(item,index) in checkoutPointTableDatas.ths" :key="index" :prop="checkoutPointTableDatas.props[index]" :label="checkoutPointTableDatas.ths[index]">
          </el-table-column>
        </el-table>
      </section>
    </section>
    <!-- 新建警示对话框 -->
    <el-dialog title="新建警示" :append-to-body="true" :visible.sync="addReportDialog" width="50%">
      <section>
        <el-form :model="addReportForm" status-icon :rules="addReportFormRules" ref="addReportRef" label-width="100px">
          <el-form-item label="警告名称" prop="name">
            <el-input v-model="addReportForm.name"></el-input>
          </el-form-item>
          <el-form-item label="警告等级" prop="warningLevel">
            <el-select class="w100" v-model="addReportForm.warningLevel" placeholder="请选择">
              <el-option v-for="item in reportTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="警告人员" prop="warningPersonnel">
            <el-input v-model="addReportForm.warningPersonnel"></el-input>
          </el-form-item>
          <el-form-item label="警告时间" prop="warningTime">
            <el-date-picker class="w100" value-format="yyyy-MM-dd HH:mm:ss" v-model="addReportForm.warningTime" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="描述" prop="remark">
            <el-input type="textarea" v-model="addReportForm.remark"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addReportDialog = false">取 消</el-button>
        <el-button type="primary" @click="addReportFun">确 定</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script>
import api from '../../../api/private/project_data'
import * as api2 from '../../../api/private/posit'
import api3 from '../../../api/private/report'
export default {
  name: 'LogChart',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    switchState: true,
    // 单点表格数据
    selectPointTableDatas: [],
    // 多点表格数据
    checkoutPointTableDatas: {
      ths: [],
      props: [],
      datas: []
    },
    getError: false,
    pointEmpty: false,
    // 点位合集
    pointList: [],
    // 选中的点位
    checkoutPoint: [],
    checkoutPointData: {},
    // 计算图类类型
    chartTypeList: [
      { label: '指数测图', type: 'zs' },
      { label: '对数测图', type: 'ds' },
      { label: '双曲测图', type: 'sq' },
      { label: '最优测图', type: 'zy' }
    ],
    // 选中的计算图类
    checkoutChartType: [],
    chart: {
      target: null,
      option: {}
    },
    chartLoading: false,
    addReportDialog: false,
    addReportForm: {
      elementId: '',
      name: '',
      remark: '',
      warningLevel: '',
      warningPersonnel: '',
      warningTime: ''
    },
    addReportFormRules: {
      name: [{ required: true, message: '请输入名称', trigger: 'change' }],
      remark: [{ required: true, message: '请输入处理描述', trigger: 'change' }],
      warningLevel: [{ required: true, message: '请选择预警级别', trigger: 'change' }]
      // warningPersonnel: [{ required: true, message: '请输入警告人员', trigger: 'change' }],
      // warningTime: [{ required: true, message: '请选择预警时间', trigger: 'change' }]
    },

    reportTypes: [
      { label: '一级', value: 1 },
      { label: '二级', value: 2 },
      { label: '三级', value: 3 }
    ],
    checkoutThreshold: [],
    threshold: {
      bxl_3: 0,
      bxl_2: 0,
      bxl_1: 0,
      bxsl_3: 0,
      bxsl_2: 0,
      bxsl_1: 0
    }
  }),
  mounted() {
    console.log(true ? (true ? '+1' : '+2') : false ? '-1' : '-2', '===================')
    this.$ebs.$on('WindowResize', this.chartResetSize)
    this.getSetChartTarget()
    console.log(this.data, 'start_data')
  },
  methods: {
    // 初始化点列表并获取第一个点的数据
    async init() {
      this.chartLoading = true
      await this.getPoints()
      if (this.pointList.length == 0) {
        this.pointEmpty = true
        this.chartLoading = false
        return
      }
      this.checkoutInit()
      this.pointEmpty = false
      this.chartLoading = false
    },
    getElementData() {
      let req = {}
    },
    async checkoutInit() {
      // 如果是 地表沉降 一次性获取所有单元下点的数据并缓存，在每次需要数据时自己抽取
      await this.getBestDataAndPointFun()
      Object.keys(this.dbcjPointAndData).forEach(id => {
        this.pointList.some(item => {
          if (item.id == id) {
            this.dbcjPointAndData[id].pointData = item
            return true
          }
        })
      })
      if (this.data.type == 2) {
        this.checkoutPoint = [Object.keys(this.dbcjPointAndData)[0], Object.keys(this.dbcjPointAndData)[1]]
      } else {
        this.checkoutPoint = [Object.keys(this.dbcjPointAndData)[0]]
      }
      this.judgeCheckoutData(this.checkoutPoint)
      this.getUnitLogDataOfPointSelectFun(this.checkoutPoint[0])
    },
    thresholdCheckoutChange() {
      this.judgeCheckoutData(this.checkoutPoint)
    },
    // 获取每个并设置每个图表的载体标签
    getSetChartTarget() {
      this.chart.target = this.$echarts.init(this.$refs.chartTarget)
    },
    // 获取单元下所有点的数据
    async getBestDataAndPointFun() {
      let req = { elementId: this.data.id }
      let res = await api.getBestDataAndPoint(req)
      if (res.code == 0) {
        this.dbcjPointAndData = res.data
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 点位多选框改变事件
    pointCheckoutChange(data) {
      // if (this.data.type != 3) return
      this.judgeCheckoutData(this.checkoutPoint)
      if (!this.checkoutPoint.length) {
      } else if (this.checkoutPoint.length > 1) {
        // 多选
        this.getUnitLogDataOfPointCheckoutFun(this.checkoutPoint)
        this.checkoutThreshold = []
      } else {
        // 单选
        this.getUnitLogDataOfPointSelectFun(this.checkoutPoint[0])
      }
    },
    // 视图类型多选框改变事件
    charTypeCheckoutChange(type) {
      // 判断多选状态并作出对应改变
      if (type == 'zy') {
        this.checkoutChartType = ['zy']
      } else {
        let index = this.checkoutChartType.indexOf('zy')
        if (index >= 0) {
          this.checkoutChartType.splice(index, 1)
        }
      }
      this.judgeCheckoutData(this.checkoutPoint)
    },
    // 最优测图选中点击
    optimalChartClick() {
      this.checkoutChartType = []
      this.judgeCheckoutData(this.checkoutPoint)
    },
    // 根据 ID 选中所有数据并执行改变
    judgeCheckoutData(pointIds) {
      if (pointIds.length <= 0) return this.clearChartAll()
      let options = []
      pointIds.forEach(id => {
        let obj = {}
        obj.pointDatas = this.dbcjPointAndData[id]
        obj.pointInformation = null
        this.pointList.some((item, index) => {
          if (this.data.type == 2 && index > 0) return true
          if (item.id == id) {
            obj.pointInformation = item
            return true
          }
        })
        options.push(obj)
      })
      this.checkoutPointData = options
      console.log(options, 'opetions')
      let endOption = this.checkoutOptionFilter(options)
      this.clearChartAll()
      this.setChartAll(endOption)
      this.chartResetSize()
      return
    },
    // 获取单元下每个点
    async getPoints() {
      let req = {
        elementId: this.data.id
      }
      let res = await api2.getPointList(req)
      if (res.code == 0) {
        this.pointList = res.data
      } else {
        this.$msg.error(res.msg)
      }
    },
    clearChartAll() {
      if (this.chart.target) {
        this.chart.target.clear()
      }
    },
    // 更新所有图表展示状态
    setChartAll(option) {
      // 更新所有图表
      if (this.chart.target) {
        this.chart.target.setOption(option)
      }
    },
    // 通知图表改变宽度
    chartResetSize() {
      // 通知图表改变
      this.chart.target.resize()
    },
    // options 加工器
    checkoutOptionFilter(chartDatas) {
      let bxl_3 = null
      let bxl_2 = null
      let bxl_1 = null
      // let bxsl_3 = null
      // let bxsl_2 = null
      // let bxsl_1 = null
      if (chartDatas.length == 1 && this.checkoutThreshold[0] == 'bxl') {
        let pointData = chartDatas[0].pointDatas
        this.threshold.bxl_3 = pointData.displacementReferenceValue ? pointData.displacementReferenceValue / 3 : null
        this.threshold.bxl_2 = pointData.displacementReferenceValue ? (pointData.displacementReferenceValue / 3) * 2 : null
        this.threshold.bxl_1 = pointData.displacementReferenceValue ? pointData.displacementReferenceValue : null
        this.threshold.bxsl_3 = pointData.reservedRate ? pointData.reservedRate / 3 : null
        this.threshold.bxsl_2 = pointData.reservedRate ? (pointData.reservedRate / 3) * 2 : null
        this.threshold.bxsl_1 = pointData.reservedRate ? pointData.reservedRate : null
      }
      // let options = {
      //   title: {
      //     text: '测图展示'
      //   },
      //   tooltip: {
      //     trigger: 'axis'
      //   },
      //   legend: {
      //     type: 'scroll',
      //     left: 100,
      //     right: 100,
      //     data: legendData
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: [0, 2, 4, 6, 8, 10]
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       type: 'line',
      //       data: [1, 5, 33, 7, 8, 9],
      //       markLine: this.threshold.bxl_3
      //         ? {
      //             symbol: ['none', 'none'],
      //             silent: true,
      //             data: [
      //               {
      //                 name: '变形量正常',
      //                 yAxis: this.threshold.bxl_3,
      //                 lineStyle: {
      //                   color: '#00894f'
      //                 }
      //               },
      //               {
      //                 name: '变形量2级预警',
      //                 yAxis: this.threshold.bxl_2,
      //                 lineStyle: {
      //                   color: '#f9be14'
      //                 }
      //               },
      //               {
      //                 name: '变形速率1级预警',
      //                 yAxis: this.threshold.bxl_1,
      //                 lineStyle: {
      //                   color: '#ab3450'
      //                 }
      //               }
      //             ]
      //           }
      //         : null
      //     }
      //   ],
      //   visualMap: this.threshold.bxl_3
      //     ? {
      //         top: 50,
      //         right: 10,
      //         show: false,
      //         pieces: [
      //           {
      //             lte: this.threshold.bxl_3,
      //             color: '#00894f'
      //           },
      //           {
      //             gt: this.threshold.bxl_3,
      //             lte: this.threshold.bxl_2,
      //             color: '#f9be14'
      //           },
      //           {
      //             gt: this.threshold.bxl_2,
      //             lte: this.threshold.bxl_1,
      //             color: '#ab3450'
      //           }
      //         ],
      //         outOfRange: {
      //           color: '#ab3450'
      //         }
      //       }
      //     : null
      // }
      // return options
      // 加工器复负责将数据对应到应有的时间刻度上
      // 实测数据对应到实测时间刻度上，实测时间刻度由 xSeries[0] 定义，为折线展示
      // 指数 对数 双曲 计算数据放到详细时间刻度上，实测时间刻度由 xSeries[1] 定义，为曲线展示
      let legendData = []
      let xSeries = [
        {
          type: 'category',
          minInterval: 1,
          boundaryGap: false,
          data: chartDatas[0].pointDatas.timeTableList1,
          axisLabel: {
            rotate: '-20',
            textStyle: {
              fontSize: '10'
            }
          }
        },
        {
          type: 'category',
          boundaryGap: false,
          show: false,
          data: chartDatas[0].pointDatas.timeTableList2,
          axisLabel: {
            rotate: '-20',
            textStyle: {
              fontSize: '10'
            }
            // minInterval: 1
            // interval: 5 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          }
        }
      ]
      let ySeries = []
      console.log(chartDatas, 'chartDatas')
      // if (false) {
      chartDatas.forEach((item, index) => {
        let lineName = item.pointDatas.pointData.name + '_实测点'
        let option = {
          name: lineName,
          type: 'line',
          xAxisIndex: 0,
          alignTicks: true,
          itemStyle: {
            color: '#666',
            lineStyle: {
              color: '#666'
            }
          },
          data: item.pointDatas.cumulativeSubsidenceList,
          markLine: this.threshold.bxl_3
            ? {
                symbol: ['none', 'none'],
                silent: true,
                data: [
                  {
                    name: '变形量正常',
                    yAxis: this.threshold.bxl_3,
                    lineStyle: {
                      color: '#00894f'
                    }
                  },
                  {
                    name: '变形量2级预警',
                    yAxis: this.threshold.bxl_2,
                    lineStyle: {
                      color: '#f9be14'
                    }
                  },
                  {
                    name: '变形速率1级预警',
                    yAxis: this.threshold.bxl_1,
                    lineStyle: {
                      color: '#ab3450'
                    }
                  }
                ]
              }
            : null
        }
        // let lineName = '实测测试' + index
        // let option = {
        //   name: lineName,
        //   type: 'line',
        //   xAxisIndex: 0,
        //   alignTicks: true,
        //   itemStyle: {
        //     color: '#666',
        //     lineStyle: {
        //       color: '#666'
        //     }
        //   },
        //   data: [150, 230]
        // }
        legendData.push(lineName)
        ySeries.push(option)
        this.checkoutChartType.forEach(type => {
          let lineName = ''
          let option = null
          switch (type) {
            case 'zs':
              lineName = item.pointDatas.pointData.name + '_指数'
              option = {
                name: lineName,
                type: 'line',
                xAxisIndex: 1,
                alignTicks: true,
                // smooth: true,
                opacity: '0.1',
                showSymbol: false,
                itemStyle: {
                  color: 'red',
                  lineStyle: {
                    color: 'red'
                  }
                },
                data: item.pointDatas.exponentList
              }
              // lineName = '指数测试' + index
              // option = {
              //   name: lineName,
              //   type: 'line',
              //   xAxisIndex: 1,
              //   alignTicks: true,
              //   smooth: true,
              //   showSymbol: false,
              //   itemStyle: {
              //     color: 'red',
              //     lineStyle: {
              //       color: 'red'
              //     }
              //   },
              //   data: [90, 123, 123, 112, 119, 120]
              // }
              break
            case 'ds':
              lineName = item.pointDatas.pointData.name + '_对数'
              option = {
                name: lineName,
                type: 'line',
                xAxisIndex: 1,
                alignTicks: true,
                // smooth: true,
                showSymbol: false,
                itemStyle: {
                  color: 'orange',
                  lineStyle: {
                    color: 'orange'
                  }
                },
                data: item.pointDatas.logarithmList
              }
              // lineName = '对数测试' + index
              // option = {
              //   name: lineName,
              //   type: 'line',
              //   xAxisIndex: 1,
              //   alignTicks: true,
              //   smooth: true,
              //   showSymbol: false,
              //   itemStyle: {
              //     color: 'yellow',
              //     lineStyle: {
              //       color: 'yellow'
              //     }
              //   },
              //   data: [89, 77, 123, 150, 171, 155]
              // }
              break
            case 'sq':
              lineName = item.pointDatas.pointData.name + '_双曲'
              option = {
                name: lineName,
                type: 'line',
                xAxisIndex: 1,
                alignTicks: true,
                // smooth: true,
                showSymbol: false,
                itemStyle: {
                  color: 'blue',
                  lineStyle: {
                    color: 'blue'
                  }
                },
                data: item.pointDatas.hyperbolaList
              }
              // lineName = '双曲测试' + index
              // option = {
              //   name: lineName,
              //   type: 'line',
              //   xAxisIndex: 1,
              //   alignTicks: true,
              //   smooth: true,
              //   showSymbol: false,
              //   itemStyle: {
              //     color: 'blue',
              //     lineStyle: {
              //       color: 'blue'
              //     }
              //   },
              //   data: [100, 110, 114, 115, 119, 130]
              // }
              break
            case 'zy':
              lineName = item.pointDatas.pointData.name + '_最优'
              option = {
                name: lineName,
                type: 'line',
                xAxisIndex: 1,
                alignTicks: true,
                // smooth: true,
                showSymbol: false,
                itemStyle: {
                  color: 'green',
                  lineStyle: {
                    color: 'green'
                  }
                },
                data: item.pointDatas.optimumList
              }
              // lineName = '最优测试' + index
              // option = {
              //   name: lineName,
              //   type: 'line',
              //   xAxisIndex: 1,
              //   alignTicks: true,
              //   smooth: true,
              //   showSymbol: false,
              //   itemStyle: {
              //     color: 'green',
              //     lineStyle: {
              //       color: 'green'
              //     }
              //   },
              //   data: [100, 110, 114, 115, 119, 130]
              // }
              break

            default:
              break
          }
          legendData.push(lineName)
          ySeries.push(option)
        })
      })
      // }

      let option = {
        title: {
          text: '测图展示'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          left: 100,
          right: 100,
          data: legendData
        },
        xAxis: [...xSeries],
        yAxis: {
          type: 'value'
        },
        series: [...ySeries],
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [
          //加上dataZoom可实现缩放
          {
            type: 'slider', //x轴
            xAxisIndex: 0,
            show: false
          },
          {
            type: 'inside', //x轴
            xAxisIndex: 0,
            zoomOnMouseWheel: true //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
          }
        ],
        visualMap: this.threshold.bxl_3
          ? {
              top: 50,
              right: 10,
              show: false,
              pieces: [
                {
                  lte: this.threshold.bxl_3,
                  color: '#00894f'
                },
                {
                  gt: this.threshold.bxl_3,
                  lte: this.threshold.bxl_2,
                  color: '#f9be14'
                },
                {
                  gt: this.threshold.bxl_2,
                  color: '#ab3450'
                }
              ],
              outOfRange: {
                color: '#999999'
              }
            }
          : null
      }
      return option
    },
    // 新建数据预警点击
    addDataReportClick(data) {
      this.clickDataCache = data
      this.addReportClick()
    },
    // 新建预警点击
    addReportClick() {
      this.addReportDialog = true
    },
    // 新建预警函数
    addReportFun() {
      this.$refs.addReportRef.validate(async bool => {
        if (bool) {
          let req = this.addReportForm
          req.elementId = this.data.id
          if (this.clickDataCache) {
            req.recordId = this.clickDataCache.id
          }
          let res = await api3.addReport(req)
          if (res.code == 0) {
            this.addReportDialog = false
            this.$refs.addReportRef.resetFields()
          } else {
            this.$msg.error(res.msg)
          }
        }
      })
    },
    // 获取单元的点的数据(单选)
    async getUnitLogDataOfPointSelectFun(id) {
      let req = {
        pointId: id
      }
      let res = await api.getUnitLogDataOfPoint(req)
      if (res.code == 0) {
        this.selectPointTableDatas = res.data
        console.log(this.selectPointTableDatas, '单点数据')
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 获取单元的点的数据(多选)
    async getUnitLogDataOfPointCheckoutFun(ids) {
      // let req = { pointIds: ids }
      let req = ids
      let res = await api.getUnitLogDataOfPointOdd(req)
      if (res.code == 0) {
        let tableOptionss = this.checkoutPointMachining(res.data)
        this.checkoutPointTableDatas = tableOptionss
      } else {
        this.$msg.error(res.msg)
      }
    },
    // 多点数据加工
    checkoutPointMachining(posintDatas) {
      let ths = []
      let props = []
      let longIndex = 0
      let longLength = 0
      posintDatas.forEach((item, index) => {
        // 找出测量时间刻度最多的数据
        if (item.timeTableList1.length > longLength) {
          longLength = item.timeTableList1.length
          longIndex = index
        }
        // 确定表头
        ths.push('点' + index + '_日期')
        ths.push('点' + index + '_变形量')
        ths.push('点' + index + '_变形速率')
        // 确定数据字段
        let timeTableList1 = index + '_timeTableList1'
        let cumulativeSubsidenceList = index + '_cumulativeSubsidenceList'
        let settlingVelocityList = index + '_settlingVelocityList'
        props.push(timeTableList1)
        props.push(cumulativeSubsidenceList)
        props.push(settlingVelocityList)
      })
      let tableDatas = []
      // 过滤并加工数据
      posintDatas[longIndex].timeTableList1.forEach((item, index) => {
        let tableDatas_item = {}
        posintDatas.forEach((item2, index2) => {
          tableDatas_item[index2 + '_timeTableList1'] = item2.timeTableList1[index]
          tableDatas_item[index2 + '_cumulativeSubsidenceList'] = item2.cumulativeSubsidenceList[index]
          tableDatas_item[index2 + '_settlingVelocityList'] = item2.settlingVelocityList[index]
        })
        tableDatas.push(tableDatas_item)
      })
      let tableOptions = {}
      tableOptions.ths = ths
      tableOptions.props = props
      tableOptions.datas = tableDatas
      return tableOptions
    }
  },

  destroyed() {
    this.$ebs.$off('WindowResize', this.chartResetSize)
  }
}
</script>

<style lang="scss" scoped>
.LogChart {
  transition: 0.3s;
  .errorBox {
  }
  .titleBtn {
    // display: none;
    position: relative;
    top: -20px;
    padding: 10px 0;
    white-space: nowrap; //文本不会换行
    overflow-x: auto;
  }
}
.selectPoint {
  position: fixed;
  background: white;
  width: 100%;
  top: 0px;
  left: 0%;
  right: 0%;
  padding-top: 30px;
  // padding-left: 20px;
  z-index: 98;
  box-shadow: 10px 10px 5px #efefef;
}
.bodyBox {
  height: calc(100%);
  // height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}
.headerBox {
  position: absolute;
  height: 1px;
  top: 10px;
  left: 30px;
  right: calc(3% + 120px);
  overflow: visible;
}
.echartBox {
  height: 460px;
}
.dataTableBox {
  height: 460px;
}
.switch {
  height: 30px;
}
.switch_btn {
  position: relative;
  bottom: -6px;
  display: inline-block;
  // transition: .2s;
  // padding: 3px 5px;
  height: 18px;
  width: 20px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgb(187, 187, 187);
  background: #fff;
}
.switch:hover .switch_btn {
  background: rgb(212, 212, 212);
  color: #fff;
}
</style>

